<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
    	<div id="app">
    		  <el-table v-loading="tableLoading" border :data="tableData" style="width: 60%" fit>
                <el-table-column
                  type="index"
                  :index="indexMethod">
                </el-table-column>
                <el-table-column label="日期" header-align="center" align="center">
                  <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" header-align="center" align="center">
                  <template slot-scope="scope">
                      <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
                      <el-input v-else v-model="scope.row.newName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" width="220">
                  </el-table-column>
                <el-table-column label="操作"header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="!scope.row.isEdit"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <div v-else>
                        <el-button type="text" size="small" @click="save(scope.row)">
                          保存
                        </el-button>
                        <el-button type="text" size="small" @click="cancel(scope.row)">
                          取消
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
    	</div>
	</body>
  	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script type="text/javascript">
		new Vue({
      		el: '#app',
	      	data() {
                return {
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                      }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                      }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                      }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                      }],
                    tableLoading: true
                }
            },
            created:function(){
               setTimeout(() => {
                 this.tableLoading = false;
               }, 2000);
            },
            methods: {
               handleEdit(index, row) {
                // row.isEdit = true;
                this.$set(row, "isEdit", true);
                if(!row.newName){
                  //第一次赋值
                  this.$set(row, "newName", row.name);
                }else{
                  this.$set(row, "newName", row.newName);
                }
                console.log(index, row);
              },
              save(row){
                row.name = row.newName;
                row.isEdit = false;
              },
              cancel(row){
                row.isEdit = false;
              }
            }
	    })
	</script>
</html>
